<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My First Grid</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/start/jquery-ui-1.8.21.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            font-size: 75%;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $("#list").jqGrid({
                url:'/web/test.json',
                datatype: 'json',
                mtype: 'GET',
                colNames:['Entry Id','Description', 'Domain','Lateral?','Active?'],
                colModel :[
                    {name:'id', index:'id', width:55},
                    {name:'desc', index:'desc', width:500},
                    {name:'domain', index:'domain', width:100},
                    {name:'lateral', index:'lateral', width:80},
                    {name:'active', index:'active', width:80}
                ],
                pager: '#pager',
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'id',
                sortorder: 'desc',
                viewrecords: true,
                gridview: true,
                caption: 'My first grid'
            });
        });
    </script>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>
</html>